<!DOCTYPE html>
<html dir="ltr">

<head>
  <meta charset="UTF-8">
  <title>Header - Translucent</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
  <link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
  <script src="../../../../../scripts/testing/scripts.js"></script>
  <script src="../../../../../dist/ionic.js"></script>
</head>

<body>
  <ion-app>
    <ion-header translucent>
      <ion-toolbar>
        <ion-title>Header - Translucent</ion-title>
      </ion-toolbar>
      <ion-toolbar color="primary">
        <ion-title>Primary - Translucent</ion-title>
      </ion-toolbar>
      <ion-toolbar color="secondary">
        <ion-title>Secondary - Translucent</ion-title>
      </ion-toolbar>
      <ion-toolbar color="tertiary">
        <ion-title>Tertiary - Translucent</ion-title>
      </ion-toolbar>
      <ion-toolbar color="success">
        <ion-title>Success - Translucent</ion-title>
      </ion-toolbar>
      <ion-toolbar color="warning">
        <ion-title>Warning - Translucent</ion-title>
      </ion-toolbar>
      <ion-toolbar color="danger">
        <ion-title>Danger - Translucent</ion-title>
      </ion-toolbar>
      <ion-toolbar color="light">
        <ion-title>Light - Translucent</ion-title>
      </ion-toolbar>
      <ion-toolbar color="medium">
        <ion-title>Medium - Translucent</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content fullscreen>
      <ion-grid>
        <ion-row>
          <ion-col size="6">
            <f class="red"></f>
          </ion-col>
          <ion-col size="6">
            <f class="green"></f>
          </ion-col>
          <ion-col size="6">
            <f class="blue"></f>
          </ion-col>
          <ion-col size="6">
            <f class="yellow"></f>
          </ion-col>
          <ion-col size="6">
            <f class="pink"></f>
          </ion-col>
          <ion-col size="6">
            <f class="purple"></f>
          </ion-col>
          <ion-col size="6">
            <f class="black"></f>
          </ion-col>
          <ion-col size="6">
            <f class="orange"></f>
          </ion-col>
        </ion-row>
      </ion-grid>

      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae lobortis felis, eu sodales enim. Nam risus nibh, placerat
        at rutrum ac, vehicula vel velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis elementum
        ligula, ac aliquet nulla. Mauris non placerat mauris. Aenean dignissim lacinia porttitor. Praesent fringilla at est
        et ullamcorper. In ac ante ac massa porta venenatis ut id nibh. Fusce felis neque, aliquet in velit vitae, venenatis
        euismod libero. Donec vulputate, urna sed sagittis tempor, mi arcu tristique lacus, eget fringilla urna sem eget
        felis. Fusce dignissim lacus a scelerisque vehicula. Nulla nec enim nunc. Quisque nec dui eu nibh pulvinar bibendum
        quis ut nunc. Duis ex odio, sollicitudin ac mollis nec, fringilla non lacus. Maecenas sed tincidunt urna. Nunc feugiat
        maximus venenatis. Donec porttitor, felis eget porttitor tempor, quam nulla dapibus nisl, sit amet posuere sapien
        sapien malesuada tortor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
        Quisque luctus, sapien nec tincidunt efficitur, nibh turpis faucibus felis, in sodales massa augue nec erat. Morbi
        sollicitudin nisi ex, et gravida nisi euismod eu. Suspendisse hendrerit dapibus orci, non viverra neque vestibulum
        id. Quisque vitae interdum ligula, quis consectetur nibh. Phasellus in mi at erat ultrices semper. Fusce sollicitudin
        at dolor ac lobortis. Morbi sit amet sem quis nulla pellentesque imperdiet. Nullam eu sem a enim maximus eleifend
        non vulputate leo. Proin quis congue lacus. Pellentesque placerat, quam at tempus pulvinar, nisl ligula tempor risus,
        quis pretium arcu odio et nulla. Nullam mollis consequat pharetra. Phasellus dictum velit sed purus mattis maximus.
        In molestie eget massa ut dignissim. In a interdum elit. In finibus nibh a mauris lobortis aliquet. Proin rutrum
        varius consequat. In mollis dapibus nisl, eu finibus urna viverra ac. Quisque scelerisque nisl eu suscipit consectetur.
      </p>

      <ion-grid>
        <ion-row>
          <ion-col size="6">
            <f class="red"></f>
          </ion-col>
          <ion-col size="6">
            <f class="green"></f>
          </ion-col>
          <ion-col size="6">
            <f class="blue"></f>
          </ion-col>
          <ion-col size="6">
            <f class="yellow"></f>
          </ion-col>
          <ion-col size="6">
            <f class="pink"></f>
          </ion-col>
          <ion-col size="6">
            <f class="purple"></f>
          </ion-col>
          <ion-col size="6">
            <f class="black"></f>
          </ion-col>
          <ion-col size="6">
            <f class="orange"></f>
          </ion-col>
        </ion-row>
      </ion-grid>
    </ion-content>
  </ion-app>

  <style>
    f {
      display: block;
      height: 200px;
    }

    .red {
      background-color: #ea445a;
    }

    .green {
      background-color: #76d672;
    }

    .blue {
      background-color: #3478f6;
    }

    .yellow {
      background-color: #ffff80;
    }

    .pink {
      background-color: #ff6b86;
    }

    .purple {
      background-color: #7e34f6;
    }

    .black {
      background-color: #000;
    }

    .orange {
      background-color: #f69234;
    }

  </style>
</body>

</html>
